<template>
  <div id="app">
<!--    头部-->
    <el-header class="head" v-if="$route.meta.isHiddenHeader" >
      <div class="icon">
        <img src="./assets/20190425100917895.png">
        <div>西科大二手书城</div>
      </div>
      <!--      有token就不显示-->
      <div class="user" v-if="!$store.state.isLogin">
        <div><router-link to="/login" id="login">登录</router-link></div>
        <div><router-link to="/register" id ="register">注册</router-link></div>
      </div>

      <div class="userInfo" v-if="$store.state.isLogin">
        <div>欢迎: {{this.$store.state.username}}</div>
        <div><router-link to="/">我的订单</router-link></div>
        <div><button @click="logout">退出登录</button></div>
      </div>
    </el-header>
    <div class="line"></div>
    <div class="head">
      <div class="nav">
        <Nav></Nav>
      </div>
      <div id="main">
        <div class="search"></div>
        <div class="item"></div>
      </div>

    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import Nav from "@/components/nav/Nav";
export default {
  name: 'App',
  components: {
    Nav,
  },
  methods :{
    logout(){
    localStorage.removeItem('token')
      localStorage.removeItem('isLogin')
      this.$store.commit('changeLogin',false)
      alert('退出成功')
    }
  }
}
</script>

<style lang="css" scoped>
.head {
  display: flex;
  justify-content: space-between;
}
#app {
  height: 100%;
}
.head {
  width: 1200px;
  margin: 0 auto;
}
.icon {
  display: flex;
  height: 60px;
  justify-content: space-between;
  width: 22%;
}
.icon div {
  font-size: 25px;
  margin-top: 15px;
  font-weight: 700;
}
.user {
  display: flex;
  justify-content: start;
  width: 20%;
  /*background-color: red;*/
}
.user div #login , #register{
  width: 50%;
  font-size: 30px;
  padding-left: 30px;
  padding-top: 10px;
  color: lightskyblue;
}
.user div #login:hover,#register:hover {
  cursor: pointer;
}
.user div #login:active,#register:hover {
  color: red;
}
.userInfo {
  width: 20%;
  display: flex;
  justify-content: space-around;
}
.userInfo div {
  margin-top: 20px;
  font-size: 15px;
}
.line {
  border-bottom: 1px solid;
  width: 1200px;
  margin: 1px auto;
}
.nav{
  float: left;
  width: 270px;
  height: 800px;
}
#main {
  float: left;
  width: 930px;
  height: 800px;
  background-color: blue;
}
#main .search {
  height: 100px;
  width: 930px;
  background-color:black;
}
#main .item {
  height: 700px;
  width: 930px;
  background-color: orange;
}

</style>
